<div class="row">
  <div class="col-lg-6 col-md-5 col-12">

    <mat-card>
      <mat-card-content>
        <div class="d-flex justify-content-between align-items-center flex-lg-row flex-column">
          <h3 class="my-0 fw-bold">
            Endpoints
          </h3>
        </div>

        <div class="row mt-3">
          <div class="col-12">
            <app-filter
              (filterList)="filterList($event)"
              [disableSearchTextBox]="isLoading | async"
              checkBoxText="System endpoints">
            </app-filter>
          </div>
        </div>

        <div class="row mt-3 scrollable-row">
          <div class="col-12">

            <app-endpoints-list
              [defaultListToShow]="defaultListToShow"
              [endpoints]="endpoints"
              (reload)="reloadEndpoints()"
              [result]="resultPanel.result"
              [payload]="resultPanel.payload"
              [isLoading]="isLoading"
              (changeEditor)="changeEditor($event)"
              #listPanel>
            </app-endpoints-list>

          </div>
        </div>

      </mat-card-content>
    </mat-card>

  </div>

  <div class="col-lg-6 col-md-7 col-12 mt-md-0 mt-4">

    <mat-card class="h-100">
      <mat-card-content class="h-100 max-height-full">

        <app-endpoints-result
          class="h-100 d-block"
          [itemToBeTried]="itemToBeTried"
          (refetchAssumptions)="listPanel.refetchAssumptions()"
          #resultPanel>
        </app-endpoints-result>

      </mat-card-content>
    </mat-card>

  </div>
</div>
